<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="shortcut icon" href="../img/homeIcon1.jpg">
	</head>

	<body>
		<div id="app">
			<main class="pab150">
				<section class="person">
					<div class="container">
						<div class="infoBox clearfix mbt30">
							<div class="txBox">
								<a :href="loginHref" >
									<img :src="loginUser.src" class="objectCover"/>
								</a>
							</div>
							<div class="text">
								<a href="personInfo.html">
									<div class="name" ><a :href="loginHref">{{loginUser.realname}}</a><span class="vip"></span></div>
									<div class="tel" ><a :href="loginHref">{{loginUser.phonenum}}</a> &nbsp;&nbsp;&nbsp; 余额：{{loginUser.money}} </div>
									<div class="tel" >点击头像可更换头像</div>
								</a>
							</div>
							<a v-show="!loginUser.id" href="join.html" class="join">加入会员</a>
							<a v-show="loginUser.id" href="#" class="join" @click="outLogin()">退出登录</a>
						</div>
						<div class="flexBox whiteBg radius20 mbt30">
							<a href="javascript:void(0)" @click="goToTicket" class="item">
								<div class="iconBox">
									<img src="../img/personIcon1.jpg" class="icon"/>
								</div>
								<h6 class="name">我的购票</h6>
							</a>
							<a href="javascript:void(0)" @click="goToActivity" class="item">
								<div class="iconBox">
									<img src="../img/personIcon2.jpg" class="icon"/>
								</div>
								<h6 class="name">我的预定</h6>
							</a>
							<a href="#" class="item" >
								<div class="iconBox" @click="goToCoupon">
									<img src="../img/personIcon3.jpg" class="icon"/>
								</div>
								<h6 class="name" >我的优惠券</h6>
							</a>
						</div>
						<div class="ads">
							<img src="../img/ads.jpg" class="adsPic" @click="getMore()"/>
						</div>
						<br>
						请输入要充值的金额：
						<input type="text" placeholder="请输入充值的金额" id="chongM">
						<input type="button" @click="Chong()" value="点击充值">
					</div>
				</section>
				<section class="adsTc">
					<div class="mask"></div>
					<div class="flexBox">
						<div class="picBox">
							<a href="#" @click="yhq()">
								<img src="../img/vipAds.jpg" class="pic"/>
							</a>
							<div class="close" id="tcClose"></div>
						</div>
					</div>
				</section>
			</main>

			<footer class="footer clearfix">
				<a class="item" href="index.html">
					<div class="icon icon1"></div>
					<p class="text">展馆展示</p>
				</a>
				<a class="item active" href="person.html">
					<div class="icon icon2"></div>
					<p class="text">个人中心</p>
				</a>
			</footer>
		</div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
	</body>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			loginUser:{
				username:"请登录",
				phonenum:"点击登录，解锁更多功能",
				src:"../img/iconCR.jpg"
			},
			loginHref:"/userclient/login.html",
			chongmoney:"",
		},
		methods:{
			checkLogin(){
				axios.get("/user/findLogin").then(function (res) {
					if (res.data!==""){
						app.loginUser = res.data
						app.loginHref = "/userclient/personInfo.html?id="+app.loginUser.id;
					}
				})
			},
			goToTicket(){
				location.href="/userclient/myTicket.html?id="+this.loginUser.id;
			},
			goToCoupon(){
				location.href = "/userclient/myYHQ.html?id="+this.loginUser.id;
			},
			goToActivity(){
				location.href = "/userclient/myYuding.html?id="+this.loginUser.id
			},
			outLogin(){
				let _this=this;
				axios.get("/user/outLogin").then(function (response){
					location.href="/userclient/person.html"
				})
			},
			yhq(){
				location.href = "/userclient/YHQ.html?id="+this.loginUser.id
			},
			getMore(){
				location.href = "/userclient/YHQ.html?id="+this.loginUser.id
			},
			Chong(){
				let _this=this;
				let x=$("#chongM").val();

				let y=Number(x);
				console.log(y+"yyy")
				console.log(typeof y+"yyy")
				_this.chongmoney=_this.loginUser.money+y;
				_this.loginUser.money=_this.chongmoney;
				console.log("现在的总金额："+_this.loginUser.money)
				console.log(typeof _this.loginUser.money)
				axios.post("/user/updateMoney",{user:_this.loginUser})
						.then(function (response) {
							_this.user=response.data;
						});

				alert("充值成功！")
				window.onLoad();
			}
		},
		created(){
			this.checkLogin()
		}
	})
</script>
</html>